<template>
  <div class="page-container">
    <!--面包屑导航-->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>会员中心</el-breadcrumb-item>
        <el-breadcrumb-item>会员引流</el-breadcrumb-item>
        <el-breadcrumb-item>会员引流待审核列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--搜索条件+操作按钮栏-->
    <div class="toolbar">
      <el-form :inline="true" :model="filters" :size="size" ref="filters">
        <el-row class="search-input">
          <el-row class="times mr30">
            <el-form-item label="创建时间：" prop="startTime" class="times">
              <el-date-picker
                v-model="filters.startTime"
                @change="changeStartDate"
                :picker-options="startDateDisabled"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
                placeholder="开始时间"
                class="input_postion"
                clearable
              ></el-date-picker>
            </el-form-item>
            <span class="times-to">-</span>
            <el-form-item prop="endTime">
              <el-date-picker
                v-model="filters.endTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
                placeholder="结束时间"
                class="input_postion"
                @change="changeEndDate"
                :picker-options="endDateDisabled"
              ></el-date-picker>
            </el-form-item>
          </el-row>
          <el-form-item label="规则名称：" prop="drainageName">
            <el-input clearable v-model="filters.drainageName" placeholder="输入规则名称" maxlength="80"></el-input>
          </el-form-item>
          <el-form-item label="活动类型：" prop="drainageTypes">
            <el-select v-model="filters.drainageTypes" placeholder="全部" clearable>
              <el-option
                v-for="item in drainageTypesList"
                :key="item.type"
                :label="item.name"
                :value="item.type"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属组织：" prop="deptName">
            <el-select v-model="filters.deptName" placeholder="全部" clearable>
              <el-option
                v-for="item in childList"
                :key="item.deptId"
                :label="item.childName"
                :value="item.childName"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <!--操作按钮-->
        <el-row  class="search-button">
          <el-form-item>
            <kt-button :label="$t('action.reset')" class="resetButton" icon="el-icon-refresh" @click="resetForm('filters')" />
          </el-form-item>
          <el-form-item>
            <kt-button
              icon="el-icon-search"
              label="搜索"
              @click="handleCurrentChange(1)"
              class="searchButton"
            />
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <div class="tab-container  active2">
      <el-tabs type="card" v-model="active" @tab-click="tabClick">
        <el-tab-pane label="待审核" name="待审核">
        </el-tab-pane>
        <el-tab-pane label="已审核" name="已审核">
        </el-tab-pane>
        <el-table
            :data="tableData"
            v-loading="loading"
            style="width: 100%">
            <el-table-column
              fixed
              prop="id"
              label="ID"
              align="center"
              v-if="false"
              width="100">
            </el-table-column>
            <el-table-column
              fixed
              prop="drainageCode"
              label="ID"
              align="center"
              width="300">
            </el-table-column>
            <el-table-column
              prop="drainageName"
              label="规则名称"
              align="center"
              width="350">
            </el-table-column>
            <el-table-column
              prop="drainageTypes"
              label="类型"
              align="center"
              width="200"> 
              <template slot-scope="scope">
                {{changeDrainageTypesList(scope.row.drainageTypes)}}
              </template>
            </el-table-column>
            <el-table-column
              prop="status"
              label="状态"
              align="center"
               width="200">
              <template slot-scope="scope">
                {{changeDrainageStatus(scope.row.status)}}
              </template>
            </el-table-column>
            <el-table-column
              prop="deptName"
              label="所属组织"
              align="center"
               width="200">
            </el-table-column>
            <el-table-column
              prop="creatorName"
              label="创建人"
              align="center"
               width="200">
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="创建时间"
              align="center"
              width="300">
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              align="center"
              width="200">
              <template slot-scope="scope">
                <el-button type="text" size="small" v-if="showAuditButtonDialog" @click.native="showAuditDialog(scope.row.id)">审核</el-button>
                <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount">
        </el-pagination>
      </el-tabs>
    </div>

    <!--保存模板弹窗-->
    <el-dialog
      title="审核"
      class="el-dialog-style"
      :visible.sync="auditDialogVisible"
      v-if="auditDialogVisible"
      :close-on-click-modal="false"
    >
      <el-form
        :model="auditForm"
        :size="size"
        ref="auditForm"
        :rules="auditFormRules"
      >
        <el-form-item v-if="false" label="ID：" label-width="130px" prop="id">
          <el-input placeholder="" v-model="auditForm.id" clearable></el-input>
        </el-form-item>
        <el-form-item label="审核意见：" :required="true" :show-message="false">
          <el-input type="textarea" maxlength="200" placeholder="" v-model="auditForm.refuseDesc" clearable class="w200"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :size="size" class="searchButton" @click.native="auditSubmit(1)">通过</el-button>
        <el-button :size="size" class="resetButton" plain @click="auditSubmit(2)">不通过</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

  import KtButton from "@/views/Core/KtButton";

  export default {
    name: "DrainageAudit",
    components: {
      // tabPane,
      KtButton
    },
    data() {
      return{
        active:"待审核",
        filters:{
          statusList: [2],
          deptName: null,
          drainageName: null,
          drainageTypes: null,
          channelCodes: null,
          startTime: null,
          endTime: null,
          start: 1,
          limit: 10,
        },
        loading:false,
        auditForm: {
          id: null,
          status: null,
          refuseDesc: null,
        },
        auditFormRules: {
          refuseDesc: [
            { required: true, message: "请填写审核意见", trigger: "blur" }
          ]
        },
        size: "small",
        drainageTypesList:[
          {type:1,name:"发短信"},
          {type:2,name:"发邮件"},
          {type:3,name:"H5入驻"}
        ],

        childList:[],
        tableData: [],
        showAuditButtonDialog: true,
        auditDialogVisible: false,
        totalCount: 10,

        startDateDisabled: {},//开始时间限制
        endDateDisabled: {},//结束时间限制
      }
    },
    methods:{
      changeStartDate: function() {
        var this_ = this;
        this_.endDateDisabled = {
          disabledDate: time => {
            if (this_.filters.startTime) {
                    return time.getTime() <= new Date(this_.filters.startTime).getTime();
            }
          }
        };
      },
      changeEndDate: function() {
        var this_ = this;
        this_.startDateDisabled = {
          disabledDate: time => {
            if (this_.filters.endTime) {
              return time.getTime() >= new Date(this_.filters.endTime).getTime();
            }
          }
        };
      },
      /**
       * 查看
       */
      handleClick(row){
        this.$router.push(`/MemDrainfeDetail/${row.id}`)
      },
      tabClick(tab,event){
        this.filters.statusList = [];
        if(tab.name == '待审核'){
          this.filters.statusList.push(2);
          this.showAuditButtonDialog = true;
        }else if(tab.name == '已审核'){
          this.filters.statusList.push(3);
          this.filters.statusList.push(4);
          this.showAuditButtonDialog = false;
        }
        this.handleCurrentChange(1);
      },
      resetForm(formName) {
        //需要校验的keys
        let keys = ["deptName","drainageTypes","drainageName","endTime","startTime"]
        //调用校验
        let  boo = this.seachTableUtils.checkFromIsNull(this.filters,keys)
        if(!boo){
          return;
        }
        if (this.$refs[formName] != undefined) {
          this.$refs[formName].resetFields();
          this.handleCurrentChange(1);
        }
      },
      // 分页查询
      getDrainageList() {

        this.loading = true;
        this.utils.request.queryPageDrainage(this.filters, res => {
          if(res.code == '0000'){

            this.totalCount = res.data.total;
            this.tableData = res.data.rows;
            this.loading = false;
          }
        });
      },
      handleSizeChange(pageSize) {
        this.filters.limit = pageSize;
        this.handleCurrentChange(1);
      },
      handleCurrentChange(pageNo) {
        this.filters.start = pageNo;
        this.getDrainageList();
      },

      // 审核
      showAuditDialog(id) {
        this.auditDialogVisible = true;
        this.auditForm.id = id;
        this.auditForm.refuseDesc = null;
      },
      auditSubmit(value) {
        if(value == 1){
          this.auditForm.status = 3;
        }else if(value == 2){
          if(this.auditForm.refuseDesc == null || this.auditForm.refuseDesc == ""){
              this.$message({"type":"error","message":"审核意见不能为空"})
              return false;
          }
          this.auditForm.status = 4;
        }
        this.$refs["auditForm"].validate(valid => {
          if (valid) {
            this.utils.request.updateDrainage(this.auditForm, res => {
              if (res.code == '0000') {
                this.$message({message: "审核成功", type: "success"});
                this.handleCurrentChange(1);
                this.auditDialogVisible = false;
              } else {
                this.$message({message: "审核失败, " + res.msg, type: "error"});
              }
            });
          }
        })
      },

      changeDrainageTypesList(value){
        let str = "";
        ("" + value).split(",").forEach(val=>{
          if(str == ""){
            str = str + this.changeDrainageTypes(val);
          }else {
            str = str + "、" + this.changeDrainageTypes(val);
          }
        });
        return str;
      },
      changeDrainageTypes(val){
        if(val == 1){
          return "发短信";
        }
        else if (val == 2){
          return "发邮件";
        }
        else if (val == 3){
          return "H5入驻";
        }
        return "";
      },
      changeDrainageStatus(val){
        if(val == 1){
          return "待提交";
        }
        else if (val == 2){
          return "待审核";
        }
        else if (val == 3){
          return "审核通过";
        }
        else if (val == 4){
          return "审核不通过";
        }
        return "";
      }

    },
    created() {
      this.handleCurrentChange(1);
      this.utils.request.queryChildList({}, res => {
        if (res.code == '0000') {
          this.childList = res.data;
        } else {
        }
      });
    }
  }

</script>
<style lang="scss" scoped>
  /deep/ .el-pagination{
    text-align: right;
  }
  .w200{
    width: 200px;
    /deep/ .el-input__inner{
      width: 200px;
    }
  }

</style>
